<template>
  <div class="page-content" v-loading="loading">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="4" class="el-col2">
        <el-button type="danger" icon="el-icon-plus" @click="showDialog('add')"
          >新增图片</el-button
        >
      </el-col>
    </el-row>
    <el-row style="margin-top: 15px">
      <k-table
        :data="BannerList"
        :showPage="false"
        ref="Bannertable"
        @sortHandler="sort($event)"
      >
        <el-table-column fixed="left" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="showDialog('edit', scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              style="color: #FA6962"
              icon="el-icon-delete"
              @click="deladvertiseHandler(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="图片名称" prop="title" />
        <el-table-column label="图片" prop="bannerimg" width="210">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.bannerimg"
              :preview-src-list="[scope.row.bannerimg]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sortno" />
        <el-table-column label="创建日期" prop="writedate" />
      </k-table>
    </el-row>
    <el-dialog
      :title="dialogTitle"
      width="500px"
      :visible.sync="isAddorEdit"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form ref="bannerform" :model="bannerform" label-width="100px">
        <el-form-item label="排序">
          <el-input-number
            v-model="bannerform.sortno"
            prop="sortno"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-row>
          <form-input
            label="图片名称"
            v-model="bannerform.title"
            prop="title"
            placeholder="图片名称"
          ></form-input>
        </el-row>
        <el-form-item label="广告图">
          <el-upload
            :action="dataUrl"
            :data="uploadData"
            :show-file-list="false"
            :before-upload="beforeUpload"
            list-type="picture-card"
            :on-success="upload_success"
          >
            <img
              v-if="dialogImageUrl"
              :src="dialogImageUrl"
              width="90"
              style="padding-top:10px"
            />
            <i v-else class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，建议图片比例：<span>210*279</span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          v-if="dvEdit == false"
          @click="AddbannerHandler('bannerform')"
          >{{ btntext }}</el-button
        >
        <el-button
          type="primary"
          v-else
          @click="editbannerHandler(bannerform.id, 'bannerform')"
          >{{ btntext }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetAdvertiseDetailApi } from "@/api/picApi";
import { getmodule_imgApi } from "@/api/picApi";
import { OpAdvertiseApi } from "@/api/picApi";
import moment from "moment";
import { baseUrl } from "@/utils/config";
export default {
  inject: ["reload"],
  data() {
    return {
      isAddorEdit: false,
      loading: true,
      dvEdit: false,
      dialogTitle: "",
      page: 1,
      pageSize: 10,
      total: 0,
      bannerform: {
        id: "",
        title: "",
        sortno: "",
        bannerimg: ""
      },
      imgurl: "http://img.inheart.cn/",
      value: "",
      BannerList: [],
      dataUrl: "",
      uploadData: {
        guestcode: "",
        gscode: ""
      },
      dialogImageUrl: "",
      uploadimg: "",
      btntext: ""
    };
  },
  mounted() {
    this.getmodule_imgData();
  },
  methods: {
    getmodule_imgData() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      let cardno = userdata.cardno;
      getmodule_imgApi({
        cardno: cardno,
        username: username,
        userid: userid,
        guestcode: guestcode,
        gscode: gscode,
        menuename: "AdvertiseSetting",
        menucname: "广告图设置",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.loading = false;
        let data = [];
        if (res.rescode == "200") {
          data = JSON.parse(res.list);
          data.forEach(element => {
            if (element.bannerimg == "") {
              element.bannerimg =
                "http://www.iqp168.com/src/assets/img/noImg_Default.png";
            } else {
              element.bannerimg = this.imgurl + element.bannerimg;
            }
          });
          this.total = res.datacount;
        }
        this.BannerList = data;
      });
    },
    getbannerDetailHandler(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      GetAdvertiseDetailApi({
        guestcode: guestcode,
        gscode: gscode,
        id: val
      }).then(res => {
        if (res.code == "0") {
          this.bannerform = res.data[0];
          this.dialogImageUrl = this.imgurl + res.data[0].bannerimg;
          this.uploadimg = res.data[0].bannerimg;
        }
      });
    },
    beforeUpload(file) {
      this.uploadData.guestcode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).reguserno;
      this.uploadData.gscode = JSON.parse(
        JSON.stringify(this.$store.state.user.user.info)
      ).gscode;
    },
    upload_success(response, file, fileList) {
      this.dialogImageUrl = this.imgurl + file.response.statusText;
      this.uploadimg = file.response.statusText;
      this.getmodule_imgData();
    },
    showDialog(type, val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      this.isAddorEdit = true;
      this.dialogTitle = type === "add" ? "新增图片" : "编辑图片";
      this.dataUrl =
        baseUrl +
        "/api/Card/Bannertimg?guestcode=" +
        guestcode +
        "&gscode=" +
        gscode;
      if (type == "add") {
        this.btntext = "添 加";
      }
      if (type == "edit") {
        this.dvEdit = true;
        this.btntext = "保 存";
        this.getbannerDetailHandler(val);
      }
    },
    AddbannerHandler(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let cardno = userdata.cardno;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          OpAdvertiseApi({
            guestcode: guestcode,
            gscode: gscode,
            sortno: this.bannerform.sortno,
            title: this.bannerform.title,
            bannerimg: this.uploadimg + "&original=1",
            imgtype: "module",
            sType: "Add",
            username: username,
            menuename: "AdvertiseSetting",
            menucname: "广告图设置",
            logintype: logintype,
            posttype: posttype,
            op_type: "新增",
            note: JSON.stringify(this.cardForm),
            cardno: cardno
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("添加成功");
              this.refresh();
            }
          });
        } else {
          return false;
        }
      });
    },
    deladvertiseHandler(val) {
      this.$confirm("您确定要删除当前广告图吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          OpAdvertiseApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Delete",
            id: val,
            username: username,
            menuename: "AdvertiseSetting",
            menucname: "广告图设置",
            logintype: logintype,
            posttype: posttype,
            op_type: "删除",
            note: val
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("删除成功");
              this.getmodule_imgData();
            }
          });
        })
        .catch(() => {});
    },
    editbannerHandler(val, formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          OpAdvertiseApi({
            guestcode: guestcode,
            gscode: gscode,
            sType: "Edite",
            sortno: this.bannerform.sortno,
            title: this.bannerform.title,
            bannerimg: this.uploadimg,
            id: val,
            username: username,
            menuename: "AdvertiseSetting",
            menucname: "广告图设置",
            logintype: logintype,
            posttype: posttype,
            op_type: "更新",
            note: JSON.stringify(this.bannerform)
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("修改成功");
              this.refresh();
            }
          });
        } else {
          return false;
        }
      });
    },
    closeDialog() {
      this.isAddorEdit = false;
      this.bannerform.id = "";
      this.bannerform.title = "";
      this.bannerform.sortno = "";
      this.dialogImageUrl = "";
      this.uploadimg = "";
      this.resetForm("bannerform");
    },
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    refresh() {
      this.reload();
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
  }

  .el-upload__tip span {
    color: #f56c6c;
  }
}
</style>
